<script setup>
import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

// 全部荣誉数据（饼图）
const option1 = ref({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
  },
  legend: {
    textStyle: {
      color: '#fff',
    },
    left: '5%',
    orient: 'vertical',
  },
  series: [
    {
      name: '荣誉类型',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: '团体荣誉' },
        { value: 735, name: '个人荣誉' },
        { value: 580, name: '项目荣誉' },
        { value: 484, name: '特殊贡献' },
        { value: 300, name: '其他荣誉' },
      ],
    },
  ],
});

// 各级组织荣誉数据（圆形图）
const option2 = ref({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter(params) {
      // 模拟各组织的数据
      const orgData = {
        团体荣誉: [
          { name: '组织A', value: 30 },
          { name: '组织B', value: 25 },
          { name: '组织C', value: 20 },
        ],
        个人荣誉: [
          { name: '组织A', value: 40 },
          { name: '组织B', value: 35 },
          { name: '组织C', value: 30 },
        ],
        项目荣誉: [
          { name: '组织A', value: 20 },
          { name: '组织B', value: 15 },
          { name: '组织C', value: 10 },
        ],
        特殊贡献: [
          { name: '组织A', value: 15 },
          { name: '组织B', value: 12 },
          { name: '组织C', value: 8 },
        ],
        其他荣誉: [
          { name: '组织A', value: 10 },
          { name: '组织B', value: 8 },
          { name: '组织C', value: 5 },
        ],
        1: [
          { name: '最佳团队奖', value: 10 },
          { name: '优秀组织奖', value: 8 },
          { name: '卓越贡献奖', value: 5 },
        ],
        2: [
          { name: '创新团队奖', value: 12 },
          { name: '先锋团队奖', value: 7 },
          { name: '杰出个人奖', value: 15 },
        ],
        3: [
          { name: '优秀员工奖', value: 9 },
          { name: '模范标兵奖', value: 6 },
          { name: '创新先锋奖', value: 11 },
        ],
        4: [
          { name: '服务之星奖', value: 8 },
          { name: '最佳项目奖', value: 14 },
          { name: '优秀工程奖', value: 10 },
        ],
        5: [
          { name: '创新项目奖', value: 9 },
          { name: '绿色环保奖', value: 5 },
          { name: '社会责任奖', value: 6 },
        ],
        6: [
          { name: '特别贡献奖', value: 13 },
          { name: '终身成就奖', value: 8 },
          { name: '公益先锋奖', value: 7 },
        ],
        7: [
          { name: '技术突破奖', value: 10 },
          { name: '文化传承奖', value: 4 },
          { name: '最佳创意奖', value: 6 },
        ],
        11: [
          { name: '最佳团队奖', value: 10 },
          { name: '优秀组织奖', value: 8 },
          { name: '卓越贡献奖', value: 5 },
        ],
        12: [
          { name: '创新团队奖', value: 12 },
          { name: '先锋团队奖', value: 7 },
          { name: '杰出个人奖', value: 15 },
        ],
        13: [
          { name: '优秀员工奖', value: 9 },
          { name: '模范标兵奖', value: 6 },
          { name: '创新先锋奖', value: 11 },
        ],
        14: [
          { name: '服务之星奖', value: 8 },
          { name: '最佳项目奖', value: 14 },
          { name: '优秀工程奖', value: 10 },
        ],
        15: [
          { name: '创新项目奖', value: 9 },
          { name: '绿色环保奖', value: 5 },
          { name: '社会责任奖', value: 6 },
        ],
        16: [
          { name: '特别贡献奖', value: 13 },
          { name: '终身成就奖', value: 8 },
          { name: '公益先锋奖', value: 7 },
        ],
        17: [
          { name: '技术突破奖', value: 10 },
          { name: '文化传承奖', value: 4 },
          { name: '最佳创意奖', value: 6 },
        ],
        21: [
          { name: '最佳团队奖', value: 10 },
          { name: '优秀组织奖', value: 8 },
          { name: '卓越贡献奖', value: 5 },
        ],
        22: [
          { name: '创新团队奖', value: 12 },
          { name: '先锋团队奖', value: 7 },
          { name: '杰出个人奖', value: 15 },
        ],
        23: [
          { name: '优秀员工奖', value: 9 },
          { name: '模范标兵奖', value: 6 },
          { name: '创新先锋奖', value: 11 },
        ],
        24: [
          { name: '服务之星奖', value: 8 },
          { name: '最佳项目奖', value: 14 },
          { name: '优秀工程奖', value: 10 },
        ],
        25: [
          { name: '创新项目奖', value: 9 },
          { name: '绿色环保奖', value: 5 },
          { name: '社会责任奖', value: 6 },
        ],
        26: [
          { name: '特别贡献奖', value: 13 },
          { name: '终身成就奖', value: 8 },
          { name: '公益先锋奖', value: 7 },
        ],
        27: [
          { name: '技术突破奖', value: 10 },
          { name: '文化传承奖', value: 4 },
          { name: '最佳创意奖', value: 6 },
        ],
        29: [
          { name: '技术突破奖', value: 10 },
          { name: '文化传承奖', value: 4 },
          { name: '最佳创意奖', value: 6 },
        ],
      };

      let result = `${params.name}<br/>`;
      if (orgData[params.name]) {
        orgData[params.name].forEach((item) => {
          result += `${item.name}: ${item.value}个<br/>`;
        });
      }
      return result;
    },
  },
  legend: {
    left: '5%',
    orient: 'vertical',
    textStyle: {
      color: '#fff',
    },
  },
  series: [
    {
      name: '荣誉类型',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['60%', '50%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}',
        color: '#fff',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      data: [
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
        { value: 75, name: '团体荣誉' },
        { value: 105, name: '个人荣誉' },
        { value: 45, name: '项目荣誉' },
        { value: 35, name: '特殊贡献' },
        { value: 23, name: '其他荣誉' },
      ],
    },
  ],
});

const flag = ref(true);

// 切换图表显示
const handleChange = () => {
  flag.value = !flag.value;
  renderEcharts(flag.value ? option1.value : option2.value);
};

// 初始化图表
onMounted(() => {
  renderEcharts(option1.value);
});
</script>

<template>
  <dv-border-box-12 class="box">
    <div class="mb-2 flex items-center justify-between px-4">
      <h3 class="text-lg text-white">
        {{ flag ? '荣誉园地(全部)' : '荣誉园地(各级组织)' }}
      </h3>
      <div
        @click="handleChange"
        class="cursor-pointer text-center text-white transition-opacity duration-300 hover:opacity-80"
        style="height: 20px"
      >
        切换图表
      </div>
    </div>
    <EchartsUI
      ref="chartRef"
      class="w-full"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-12>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>
